<template>
  <div>
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header :state="1" />
          <div style="clear: both;"></div>
        </div>
      </div>
      <!--banner-->
      <div class="target a-9" id="target-2">
        <el-carousel class="lunbo-box-item" indicator-position="none" height="600px">
          <el-carousel-item v-for="(item,index) in abc_img" :key="index">
            <img :src="item.src" class="lunbotu" alt="轮播图" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--搜索-->
      <div class="a-10">
        <form class="a-11">
          <input class="a-12" type="text" placeholder="请输入关键字" v-model="searchvalue" />
          <button @click="clickSearch" type="button" class="a-13">
            <img src="@/assets/image/index-26.png" />
          </button>
        </form>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--挂牌板块-->
    <div class="a-18">
      <div class="a-19">
        <!--左边-->
        <div class="a-20">
          <div class="a-21">
            <ul class="a-22">
              <li :class="projectType==1?'active':''" @click="switchProductType(1)">项目挂牌</li>
              <li :class="projectType==1?'':'active'" @click="switchProductType(0)">作品挂牌</li>
            </ul>
            <a href="javascript:;" class="a-23" @click="goListWorks">更多></a>
          </div>
          <!-- 挂牌list -->
          <div class="a-24">
            <div class="a-25-box">
              <ul class="a-25" >
                <li v-for="(item,index) in projectList" :key="index">
                  <a href="javascript:;" @click="ClickProduct(item.product_id,item.trading_type)">
                    <div class="a-26">
                      <img v-if="item.cover_image" class="a-27" :src="item.cover_image" />
                      <!-- <img class="a-27" src="@/assets/image/index-11.png" /> -->
                      <div class="a-28">
                        <span>{{item.empower_type|empowerType}}</span>
                      </div>
                    </div>
                    <div class="a-29">{{item.product_name||item.works_name}}</div>
                    <div class="a-30">交易类型： {{item.trading_type|tradingType}}</div>
                    <div
                      class="a-30"
                      v-if="item.project_type"
                    >作品类型：{{item.project_type|projectType}}</div>
                    <div class="a-30" v-if="item.works_type">作品类型：{{item.works_type|projectType}}</div>
                    <div class="a-31">
                      <div class="a-32">
                        ￥
                        <span>{{item.price_type==0?item.price/100:'面议'}}</span>
                      </div>
                      <div class="a-33">
                        <span class="a-34">
                          <img src="@/assets/image/fa-eye.png" />
                          <span>{{item.see_num}}</span>
                        </span>
                        <span class="a-34">
                          <img src="@/assets/image/index-25.png" />
                          <span>{{item.putaway_time|Time}}</span>
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
              <div class="a-35">
                <mo-paging
                  :page-index="currentPage"
                  :total="totalPage"
                  :page-size="pageSize"
                  @change="pageChange"
                ></mo-paging>
              </div>
            </div>
          </div>
        </div>
        <!--右边-->
        <div class="a-36">
          <div class="a-37">挂牌资讯</div>
          <img class="a-38" src="@/assets/image/index-14.png" />
          <ul class="a-39">
            <li
              class="dh"
              v-for="(item,index) in tradingNewsList"
              :key="index"
              @click="toNewsList(item.id)"
            >
              <a href="javascript:;">
                <div class="a-40">{{item.title}}</div>
                <div class="a-41">{{item.content}}</div>
                <div class="a-42">
                  <img src="@/assets/image/index-25.png" />
                  <span>{{item.time}}</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
    <!--核心服务-->
    <div class="a-46">
      <div class="a-47" style>
        <div class="a-48">
          <div class="a-49">core&emsp;&emsp;&emsp;services</div>
          <div class="a-50">核心服务</div>
          <img class="a-51" src="@/assets/image/index-9.png" />
        </div>
        <div class="a-52">
          <ul class="a1-53">
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_bq.png" />
                <div class="a1-55"></div>
                <div class="a1-56">DCI版权登记</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_aq.png" />
                <div class="a1-55"></div>
                <div class="a1-56">原创证据保全</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_ss.png" />
                <div class="a1-55"></div>
                <div class="a1-56">全网传播检测</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_rz.png" />
                <div class="a1-55"></div>
                <div class="a1-56">网络侵权取证</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_sq.png" />
                <div class="a1-55"></div>
                <div class="a1-56">对外授权管理</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_xs.png" />
                <div class="a1-55"></div>
                <div class="a1-56">线上线下维权</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_yj.png" />
                <div class="a1-55"></div>
                <div class="a1-56">版权风险预警</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_xg.png" />
                <div class="a1-55"></div>
                <div class="a1-56">正版作品供稿</div>
              </a>
            </li>
            <li>
              <a href="havascript:;">
                <img class="a1-54" src="@/assets/image/icon_yfw.png" />
                <div class="a1-55"></div>
                <div class="a1-56">第三方云服务</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--摘牌信息+热门权益人+影视版权-->
    <div class="a-54">
      <div class="a-55">
        <!--左-->
        <div class="a-56">
          <div class="a-57">
            <span class="a-58">摘牌信息</span>
          </div>
          <ul class="a-59" v-if="delistList!=null">
            <li  v-for="(item,index) in delistList" :key="index" >
              <a href="javascript:;">
                <span class="a-60">{{index+1}}</span>

                <span class="a-63">{{item.worksName}}</span>
                <span class="a-61">{{item.tradingType|projectType}}</span>
                <span class="a-62">{{item.agreementNum}}</span>
                <span class="a-64">{{item.endTime |Time}}</span>
              </a>
            </li>
          </ul>
        </div>
        <!--右-->
        <div class="a-65">
          <div class="a-57">
            <span class="a-58">热门权益人</span>
            <router-link to="hotholders">
              <a class="a-23 a-66">更多></a>
            </router-link>
          </div>
          <ul class="a-67">
            <li v-for="(item,index) in originatorsList" :key="index">
              <a href="javascript:;">
                <div class="a-68">
                  <img v-if="item.avatar" :src="item.avatar" />
                  <img v-else src="@/assets/image/index-16.png" />
                </div>
                <div class="a-69">
                  <div class="a-70">{{item.nickName}}</div>
                  <!-- <div class="a-71">中国影视产业的咨询平台中国影视产业...</div> -->
                  <div class="a-72">作品数量：{{item.workNum}}</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="a-73">
        <div class="a-48">
          <div class="a-49">Film and television copyright</div>
          <div class="a-50">影视版权</div>
          <img class="a-51" src="@/assets/image/index-9.png" />
        </div>
        <!-- <div class="a-75">
          <ul class="a-22 a-74">
            <li :class="Movies==1?'active':''" @click="clickMovies(1)">形象授权</li>
            <li :class="Movies==2?'active':''" @click="clickMovies(2)">电影音像制品</li>
            <li :class="Movies==3?'active':''" @click="clickMovies(3)">服装饰品</li>
            <li :class="Movies==4?'active':''" @click="clickMovies(4)">海报玩具</li>
          </ul>
        </div>-->
        <div class="a-24 a-76">
          <!--1-->
          <div class="a-25-box a-87">
            <div class="a-77">
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-27.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-1.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-2.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-13.png" @click="$router.push('/listVideo')"/>
              </div>
            </div>
            <div class="a-80">
              <img class="a-81" src="@/assets/image/index-27.png" @click="$router.push('/listVideo')"/>
              <div class="a-82">
                <div class="a-83">商业委托拍摄</div>
                <div
                  class="a-84"
                >利用全球优秀的制片资源，通过专业队伍为客户提供从策划、拍摄、后期处理到出片的全流程服务。 业务范围涵盖平面制作、宣传片及 TVC 拍摄制作、三维制作、VR 拍摄制作等。</div>
                <a class="a-85" href="javascript:;">
                  <span class="a-44" @click="$router.push('/listVideo')">查看更多</span>
                  <i class="a-45 a-86"></i>
                </a>
              </div>
            </div>
            <div class="a-77">
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-3.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-4.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-5.png" @click="$router.push('/listVideo')"/>
              </div>
              <div class="a-78">
                <img class="a-79" src="@/assets/image/index-6.png" @click="$router.push('/listVideo')" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--行业资讯-->
    <div class="a-88">
      <div class="a-89">
        <div class="a-48">
          <div class="a-49">Industry Information</div>
          <div class="a-50">行业资讯</div>
          <img class="a-51" src="@/assets/image/index-9.png" />
        </div>
        <div class="a-90">
          <div class="a-91">
            <a class="a-97" href="javascript:;" @click="toshownews(tradeNewsList[0].trade_news_id)">
              <div class="a-92">
                <img class="a-93" :src="tradeNewsList[0].image" />
                <div class="a-94">
                  <div class="a-95">01</div>
                  <div class="a-96">{{tradeNewsList[0].create_time|Time}}</div>
                </div>
              </div>
              <div class="a-98">{{tradeNewsList[0].title}}</div>
            </a>
            <a class="a-99" href="javascript:;">
              <router-link to="listNews">
                <span class="a-44">查看更多</span>
              </router-link>
              <i class="a-45 a-100"></i>
            </a>
          </div>
          <div class="a-101">
            <ul class="a-102">
              <li v-for="(item,index) in tradeNewsList" :key="index">
                <a href="javascript:;" v-if="index>0" @click="toshownews(item.trade_news_id)">
                  <div class="a-103">
                    <div class="a-104">0{{index}}</div>
                    <div class="a-105"></div>
                    <div class="a-106">{{item.create_time|Time}}</div>
                  </div>
                  <div class="a-107">
                    <div class="a-108">{{item.title}}</div>
                    <div class="a-109">{{item.synopsis}}</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
    <div class="a-110">
      <div class="a-111">
        <div class="a-48">
          <div class="a-49">Part&emsp;&emsp;&emsp;&emsp;ner</div>
          <div class="a-50">合作伙伴</div>
          <img class="a-51" src="@/assets/image/index-9.png" />
        </div>
        <ul class="a-112">
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb1.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb2.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb3.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb4.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb5.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb6.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb7.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb8.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb9.png" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img class="a-113" src="@/assets/image/hb10.png" />
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!--底部-->
  </div>
</template>
<script>
import moment from "moment";
import Header from "@/views/header.vue";
import MoPaging from "@/views/Page";
import http from "@/api/home";
export default {
  name: "newindex",
  components: {
    Header,
    MoPaging,
  },
  data() {
    return {
      abc_img: [
        { src: require("../../assets/image/banner1.png") },
        { src: require("../../assets/image/banner2.png") },
        { src: require("../../assets/image/banner3.png") },
      ],
      tradeNewsList: [
        {
          image: null,
          create_time: null,
          trade_news_id: null,
          synopsis: null,
          title: null,
        },
      ], //行业资讯
      originatorsList: Array, //热门权益人
      noticeList: Array, //系统公告
      projectType: 1, //1项目 0作品 type
      searchvalue: null, //搜索内容
      projectList: Array, //作品
      pageSize: 1, //每页显示20条数据
      totalPage: 1, //总记录数
      currentPage: 1, //作品与项目挂牌当前页码
      //挂牌资讯
      tradingNewsList: Array, //通知
      //摘牌信息
      delistList: Array,
      Movies: 1, //影视版权点击
    };
  },
  methods: {
    clickMovies(e) {
      this.Movies = e;
    },
    // 下一页
    pageChange(e) {
      this.currentPage = e;
      if (this.projectType == 1) {
        this.GetprojectList();
      } else {
        this.GetworksListh();
      }
    },
    // 点击作品
    ClickProduct(id, Type) {
      console.log(id, Type);
      let _this = this;
      _this.$router.push({
        name: "showWorks",
        query: {
          product: id,
        },
      });
    },
    // 点击项目作品tab
    switchProductType(e) {
      //  项目挂牌1 作品挂牌0
      if (e == 1) {
        this.projectType = 1;
        this.currentPage = 1;
        this.GetprojectList();
      } else {
        this.projectType = 0;
        this.currentPage = 1;
        this.GetworksListh();
      }
    },
    toshownews(e) {
      console.log(e);
      let _this = this;
      _this.$router.push({
        name: "showNews",
        query: {
          product: e,
        },
      });
    },
    // 获取系统公告
    GetnoticeList() {
      var datas = `noticeType=2&pageNum=1&pageSize=10`;
      http.noticeList(datas).then((res) => {
        if (res.code == 200) {
          // 存下轮播新闻

          window.sessionStorage.setItem("lb", JSON.stringify(res.rows));
          this.noticeList = res.rows;
        }
      });
    },
    //项目挂牌
    GetprojectList() {
      http
        .projectList({
          currentPage: this.currentPage,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.projectList = res.data.projectList;
            this.currentPage = res.data.currentPage;
            this.totalPage = res.data.totalPage;
          }
        });
    },
    //作品挂牌
    GetworksListh() {
      http
        .worksListh({
          currentPage: this.currentPage,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.projectList = res.data.worksList;
            this.currentPage = res.data.currentPage;
            this.totalPage = res.data.totalPage;
          }
        });
    },
    //挂牌资讯
    GettradingNewsList() {
      http
        .tradingNewsList({
          currentPage: 1,
          size: 6,
        })
        .then((res) => {
          if (res.code == 200) {
            this.tradingNewsList = res.data.tradingNewsList;
          }
        });
    },
    //获取摘牌信息
    GetdelistList() {
      http
        .delistList({
          currentPage: 1,
        })
        .then((res) => {
          console.log("这里摘牌信息")
          console.log(res);
          if (res.code == 200) {
            if(res.data!=null){
             this.delistList = res.data;
            }else{
              this.delistList=[];
            }
            
          }
        });
    },
    //热门权益人
    originators() {
      http
        .originators({
          currentPage: 1,
          pageSize: 6,
        })
        .then((res) => {
          if (res.code == 200) {
            this.originatorsList = res.rows;
          }
        });
    },
    //行业资讯
    tradeNews() {
      http
        .tradeNews({
          currentPage: 1,
          pageSize: 4,
        })
        .then((res) => {
          if (res.code == 200) {
            this.tradeNewsList = res.data.tradeNewsList;
          }
        });
    },
    //挂牌资讯跳转
    toNewsList(e) {},

    //点击搜索
    clickSearch() {
      if(!this.searchvalue){this.$message.error("请输入搜索关键字");return false}
      var _this = this;
      _this.$router.push({
        path: "/listWorks",
        query: { search: this.searchvalue },
      });
    },

    //前往版权交易页面
    goListWorks() {
      this.$router.push("/listWorks");
    },
  },
  created() {
    this.GetnoticeList();
    this.GetprojectList();
    this.GettradingNewsList();
    this.GetdelistList();
    this.originators();
    this.tradeNews();
  },
  mounted() {
    setTimeout(() => {
      this.asyncCount = 5;
    }, 1000);
  },
  filters: {
    Time(value) {
      return moment(value).format("YYYY-MM-DD");
    },
    empowerType(value) {
      let arr = ["部分转让", "全部转让"];
      return arr[value];
    },
    tradingType(value) {
      let arr = ["作品挂牌", "项目挂牌"];
      return arr[value];
    },
    projectType(value) {
      let arr = [
        "图书",
        "期刊",
        "杂志",
        "报纸",
        "电影",
        "电视剧",
        "网剧",
        "综艺",
        "脱口秀",
        "纪录片",
        "专题片",
        "动漫",
        "少儿",
        "MTV",
        "演唱会",
      ];
      return arr[value];
    },
  },
};
</script>
<style>
@import "../../css/index.css";
@import "../../css/idangerous.swiper.css";
.a-17{
  height: 30px;
}
.swiper-container{
  height: 100%;
}
.a-15{
  padding-top: 15px;
}
</style>